<template>
  <div class="new-merchant">
    <Breadcrumb>
      <BreadcrumbItem v-for="(name, i) in breadcrumb" :key="i">{{ name }}</BreadcrumbItem>
    </Breadcrumb>
    <div class="wrap">
      <p class="title">基本信息</p>
      <Form ref="formItem" :model="formItem" :rules="formRule" :label-width="90" label-position="left">
        <FormItem prop="status" label="人员状态：">
          <Select v-model="formItem.status" placeholder="人员状态" style="width: 300px;" filterable clearable>
            <Option v-for="item in statusList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        <FormItem prop="accountName" label="人员姓名：">
          <Input type="text" v-model="formItem.accountName" placeholder="人员姓名" clearable style="width: 300px;"/>
        </FormItem>
        <FormItem prop="telephone" label="手机号：">
          <Input type="text" v-model="formItem.telephone" placeholder="手机号" clearable style="width: 300px;"/>
        </FormItem>
        <FormItem prop="resetPassword" label="重置密码：">
          <Input type="password" disabled value="12345678" placeholder="密码" style="width: 210px;"/>&nbsp;&nbsp;
          <Tooltip content="重置密码为12345678" placement="right">
            <Button type="success" @click="resetPws">重置密码</Button>
          </Tooltip>
        </FormItem>
        <FormItem prop="companyId" label="所属商户：">
          <Select v-model="formItem.companyId" placeholder="所属商户" style="width: 300px;" filterable clearable>
            <Option v-for="item in companyList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        <FormItem prop="accountType" label="人员类型：">
          <Select v-model="formItem.accountType" placeholder="人员类型" style="width: 300px;" filterable clearable>
            <Option v-for="item in typeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        <div class="form-but">
          <Button type="success" @click="handleSubmit('formItem')">保存人员信息</Button>
        </div>
      </Form>
    </div>
  </div>
</template>

<script>
import Api from '@/api'

const merchantApi = Api.DistributionPartnerInfo
const distributionApi = Api.Distribution
const validatePhoto = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('此项必填'))
  } else if (!/^1\d{10}$/.test(value)) {
    callback(new Error('请输入正确格式的手机号!'))
  } else {
    callback()
  }
}

export default {
  name: 'login',
  data() {
    return {
      breadcrumb: ['商户人员管理', '新增人员'],
      formItem: {
        accountName: '',
        accountType: '',
        companyId: '',
        resetPassword: false,
        status: '',
        telephone: ''
      },
      formRule: {
        companyType: [{ required: true, message: '此项必填', trigger: 'blur' }],
        accountName: [{ required: true, message: '此项必填', trigger: 'blur' }],
        accountType: [{ required: true, message: '此项必填', trigger: 'blur' }],
        companyId: [{
          required: true, type: 'number', message: '此项必填', trigger: 'blur'
        }],
        status: [{ required: true, message: '此项必填', trigger: 'blur' }],
        telephone: [
          { required: true, message: '此项必填', trigger: 'blur' },
          { validator: validatePhoto, trigger: 'blur' }
        ]
      },
      companyList: [],
      typeList: [
        {
          label: '普通用户',
          value: '1'
        },
        {
          label: '超级管理员',
          value: '0'
        }
      ],
      statusList: [
        {
          label: '启用',
          value: '1'
        },
        {
          label: '禁用',
          value: '0'
        }
      ],
    }
  },
  methods: {
    resetPws() {
      this.formItem.resetPassword = true
      this.$Message.success('重置成功!')
    },
    handleSubmit(name) {
      this.$refs[name].validate(async (valid) => {
        if (valid) {
          const id = this.$route.query.id
          const value = this.formItem
          if (!value.resetPassword) {
            value.resetPassword = false
          }
          delete value.createTime
          delete value.stationedCase
          const params = {
            ...value
          }
          const { responseCode, responseMessage, data } = await this.$request(id ? merchantApi.updatePartnerInfo : merchantApi.addPartnerInfo, params)
          if (responseCode === '1') {
            this.$Message.success(id ? '修改成功' : '新增成功！')
            this.$router.push({ path: '../distributionManagement' })
          } else {
            this.$Message.error(id ? responseMessage || '修改失败！' : responseMessage || '新增失败！')
          }
        }
      })
    },
    async getCompanyList() {
      const { responseCode, data } = await this.$request(distributionApi.listOptionCompany)
      if (responseCode === '1') {
        this.companyList = data
      }
    },
    async getDetail(id) {
      const { responseCode, data } = await this.$request(merchantApi.getPartnerInfo, { id })
      if (responseCode === '1') {
        data.companyId = parseInt(data.companyId)
        this.formItem = data
      }
    },
  },
  mounted() {
    this.getCompanyList()
    const id = this.$route.query.id
    if (id) {
      this.getDetail(id)
    }
  },
}
</script>
<style lang="scss" scoped>
.new-merchant {

  .wrap {
    width: 390px;
    margin: 0 auto;
    padding: 30px 0;
  }

  .title {
    font-size: 22px;
    font-weight: 600;
    padding: 20px 0 15px;
  }

  .form-but {
    display: flex;
    justify-content: flex-end;
  }
}
</style>
